import { LinktableOutlined, DownloadOutlined } from '@apitable/icons';
import { LinkButton } from './index';
import { Canvas, ArgsTable } from '@storybook/addon-docs';
import { ThemeToggle } from '../../stories/theme-toggle';
import { colors } from '../../helper';

<Meta title="en/components/LinkButton" />

# LinkButton

## Usage

```jsx
import { LinkButton } from '@apitable/components';
```

By default, the link is jumped through the `a` tag.

<Canvas>
<ThemeToggle lang="en">
  <LinkButton>Link Url</LinkButton>
</ThemeToggle>
</Canvas>

Set `target` to `_blank` to open the website in a new browser window `https://apitable.com`.

<Canvas>
<ThemeToggle lang="en">
    <LinkButton href="https://apitable.com/">https://apitable.com</LinkButton>
</ThemeToggle>
</Canvas>

## Color

Default is primary color, you can customize the color.

+ The color passed in the color palette will automatically handle the hover and active colors.
+ For non-palette colors, you need to override the colors in the hover and active states by yourself.


<Canvas>
<ThemeToggle lang="en">
<LinkButton>Click Link</LinkButton>
<LinkButton color="#FF7A00">Click Link</LinkButton>
<LinkButton color={colors.textCommonSecondary}>Click Link</LinkButton>
<LinkButton className="myLinkButton">Click Link</LinkButton>
</ThemeToggle>
</Canvas>

## Hide underline

Underlined by default, remove underline by setting `underline` to `false`.

<Canvas>
<ThemeToggle lang="en">
<LinkButton
  underline={false}
  href="https://apitable.com"
>
  Click link
</LinkButton>
</ThemeToggle>
</Canvas>

## Button element

Change the a tag to button by specifying `component="button"`. Can be specified as other HTML tags, such as `div`, as required.

<Canvas>
<ThemeToggle lang="en">
    <LinkButton>Link Url</LinkButton>
</ThemeToggle>
</Canvas>


## Prefix or suffix icons

<Canvas>
<ThemeToggle lang="en">
    <LinkButton prefixIcon={<LinktableOutlined currentColor />}>
        Click Link
    </LinkButton>
    <LinkButton suffixIcon={<DownloadOutlined currentColor />}>
        Click Link
    </LinkButton>
</ThemeToggle>
</Canvas>

## Disabled

<Canvas>
<ThemeToggle lang="en">
    <LinkButton disabled>
        Click Link
    </LinkButton>
</ThemeToggle>
</Canvas>

## Block

<Canvas>
<ThemeToggle lang="en">
    <LinkButton block>
        Click Link
    </LinkButton>
</ThemeToggle>
</Canvas>

## API

| Name       | Type        | Description                                            | Default |
|------------|-------------|--------------------------------------------------------|---------|
| block      | boolean     | fill width                                             | -       |
| disabled   | boolean     | disabled button                                        | -       |
| component  | ElementType | senders the component using the specified HTML element | a       |
| prefixIcon | ReactNode   | prefix icon                                            | -       |
| suffixIcon | ReactNode   | suffix icon                                            | -       |
| href       | string      | link url                                               | -       |
| underline  | boolean     | show underline                                         | true    |
| color      | string      | font color                                             | -       |
| target     | string      | specify where to open linked documents                 | -       |

